<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/商品分类列表.css">
    <script src="./js/flexible.js"></script>
</head>

<body>
    <div class="header">
        <img src="./images/fanhui.png" style="width: 0.2667rem; height: 0.4667rem;">
        <h1>商品列表</h1>
    </div>
    <div class="search">
        <img src="./images/search.png" id="search">
        <input type="search" placeholder="输入您要搜索的宝贝..">
        <img src="./images/xinxi.png" id="xinxi">
    </div>
    <div class="fenlei">
        <ul>
            <li style="border-left: none;" class="blue">
                人气
            </li>
            <li>
                销量
            </li>
            <li style="border-right: none;">
                价格
                <img src="./images/下拉.png" style="margin-left: .0667rem;">
            </li>
        </ul>
    </div>
    <div class="shangpin">
        <ul>
            <li>
                <div class="img img1">
                    <img src="./images/home-new.png" class="new">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白洗面奶
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img2">
                    <img src="./images/home-promotion.png" class="new">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白嫩肤霜
                </div>
                <div class="jiage">
                    ￥189 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img1">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白洗面奶
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img2">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白嫩肤霜
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img1">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白洗面奶
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img2">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白嫩肤霜
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
        </ul>
    </div>
</body>
<script>
    // 分类高亮切换
    var lis = document.querySelectorAll(".fenlei ul li");

    for (var i = 0; i < lis.length; i++) {
        forer(i)
    }

    function forer(i) {
        lis[i].onclick = function() {
            for (var j = 0; j < lis.length; j++) { //重置所有属性
                lis[j].className = '';
            }
            lis[i].className = 'blue'; //修改文字颜色
        }
    }
    // 跳转
    var fanhui = document.querySelector('.header img');
    fanhui.onclick = function() {
        window.history.go(-1);
        if (!window.history.go(-1)) {
            location.href = "./首页.html";
        }
    }
    var lis2 = document.querySelectorAll('.shangpin li');
    for (var i = 0; i < lis2.length; i++) {
        lis2[i].onclick = function() {
            location.href = "./商品详情-详情.html";
        }
    }
</script>

</html>